<!-- ✅ MODERN FLIP CARDS WITH CHART FRONT + INFO BACK -->
<style>
.dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 10px;
  transition: all 0.3s ease;
}

.dashboard-toggle-btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #b45309;
  color: white;
  padding: 10px 28px;
  border: none;
  border-top: 6px solid orange;
  font-weight: bold;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.dashboard-toggle-btn.top {
  position: relative;
  margin: 10px 8px;
  top: auto;
  left: auto;
  transform: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  border-top: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: inline-block;
  background-color: #b45309;
  color: white;
}

.dashboard-hidden,
.dashboard-charts-hidden,
.dashboard-filters-hidden {
  display: none;
}

.chart-container-user-posted {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}

.chart-container-user-posted h4 {
  margin-bottom: 8px;
  font-size: 16px;
  text-align: center;
  color: #333;
}

.flip-card {
  perspective: 1000px;
  width: 260px;
  height: 280px;
  margin: 10px;
  border-radius: 16px;
  transition: transform 0.2s;
  position: relative;
}
.flip-card-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}
.flip-card.pinned .flip-card-inner {
  transform: rotateY(180deg) !important;
}
.flip-card:hover .flip-card-inner:not(.pinned) {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  padding: 14px;
  box-sizing: border-box;
}
.flip-card-back {
  transform: rotateY(180deg);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.job-source-icon {
  font-size: 18px;
}
.chart-center {
  width: 100%;
  height: 140px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart-center canvas {
  width: 100% !important;
  height: 100% !important;
}
.chart-legend-stats {
  font-size: 12px;
  padding-top: 8px;
}
.chart-legend-stats div {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.chart-legend-stats span.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot.active { background-color: #34a853; }
.dot.expired { background-color: #ea4335; }
.dot.archived { background-color: #9aa0a6; }
.card-description {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  margin-top: 20px;
}
.pin-control {
  text-align: right;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-right: 4px;
}
.drag-icon {
  font-size: 14px;
  opacity: 0.6;
  cursor: move;
  margin-left: auto;
  user-select: none;
}
</style>

<!-- ✅ NAVIGATION TOP -->
<div class="custom-navbar">
  <div class="nav-left">
    <a href="#" onclick="scrollToTop(); return false;">
      <img src="images/logo.png" alt="Logo" class="logo">
    </a>
    <button class="dashboard-toggle-btn top" onclick="toggleDashboardCards()" id="dashToggleBtnInline" style="display: none;">
      Show Dashboard
    </button>
    <button class="dashboard-toggle-btn top" onclick="toggleDashboardCards()" id="dashToggleBtnTop">
      Hide Dashboard
    </button>
  </div>
  <div class="nav-center">
    <a href="javascript:void(0)" onclick="openModal('register.php?page=register_jobseeker')">Jobseeker Register</a>
    <a href="javascript:void(0)" onclick="openModal('register.php?page=register_employer')">Employer Register</a>
    <?php if (!isLogged()) { ?>
      <a href="javascript:void(0)" onclick="openModal('login.php')">Login</a>
    <?php } ?>
  </div>
</div>

<!-- ✅ DASHBOARD AREA -->
<div class="dashboard-filters" id="dashboardFilters">
  <button class="dashboard-toggle-btn top" onclick="toggleDashboardCards()">Hide Dashboard</button>
  <!-- Filter buttons (This Month, All Data, etc.) -->
</div>
<div class="chart-container-user-posted" id="dashboardCharts">
  <!-- Chart elements here -->
</div>
<div class="dashboard" id="dashboard">
  <!-- Flip Card Template -->
  <div class="flip-card draggable" id="card_govt">
    <div class="flip-card-inner" id="govt_inner">
      <!-- FRONT: Chart Summary -->
      <div class="flip-card-front">
        <div class="card-header">
          <div style="display:flex;align-items:center;gap:6px;">
            <span class="job-source-icon">🟩</span>
            <strong>Government Jobs</strong>
          </div>
          <div class="pin-control">
            <button class="pin-btn" onclick="togglePin(this, 'card_govt', 'govt_inner')">📌</button>
            <small class="pin-label">Pin to stop flip</small>
            <span class="drag-icon" title="Drag">⤧</span>
          </div>
        </div>
        <div class="chart-center">
          <canvas id="govtChart"></canvas>
        </div>
        <div class="chart-legend-stats">
          <div><span class="dot active"></span> <span id="govt_active_pct"></span> {$govt_active}</div>
          <div><span class="dot expired"></span> <span id="govt_expired_pct"></span> {$govt_expired7}</div>
          <div><span class="dot archived"></span> <span id="govt_archived_pct"></span> {$govt_archived}</div>
        </div>
      </div>
      <!-- BACK: Info Text -->
      <div class="flip-card-back">
        <div class="card-header">
          <div style="display:flex;align-items:center;gap:6px;">
            <span class="job-source-icon">🟩</span>
            <strong>Government Jobs</strong>
          </div>
          <div class="pin-control">
            <button class="pin-btn" onclick="togglePin(this, 'card_govt', 'govt_inner')">📍</button>
            <small class="pin-label">Unpin to allow flip</small>
            <span class="drag-icon" title="Drag">⤧</span>
          </div>
        </div>
        <div class="card-description">
          The Public Service Commission is proud of its service and reputation as being the central agency for Human Resource Management and Human Resource Professionals in Samoa’s Public Sector.
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
function toggleDashboardCards() {
  const dash = document.getElementById("dashboard");
  const filters = document.getElementById("dashboardFilters");
  const charts = document.getElementById("dashboardCharts");
  const btn = document.getElementById("dashToggleBtnTop");
  const topBtn = document.getElementById("dashToggleBtnInline");

  dash.classList.toggle("dashboard-hidden");
  filters.classList.toggle("dashboard-filters-hidden");
  charts.classList.toggle("dashboard-charts-hidden");

  const show = dash.classList.contains("dashboard-hidden");
  btn.textContent = show ? "Show Dashboard" : "Hide Dashboard";
  topBtn.style.display = show ? "inline-block" : "none";
}

function togglePin(button, cardId, innerId) {
  const card = document.getElementById(cardId);
  const inner = document.getElementById(innerId);
  const label = button.nextElementSibling;

  if (inner.classList.contains("pinned")) {
    inner.classList.remove("pinned");
    card.classList.remove("pinned");
    label.textContent = "Pin to stop flip";
    button.textContent = "📌";
  } else {
    inner.classList.add("pinned");
    card.classList.add("pinned");
    label.textContent = "Unpin to allow flip";
    button.textContent = "📍";
  }
}
</script>
